<template>
  <div class="appDemo">
    <md-button type="primary" @click="getToken">getToken</md-button>
    <md-button type="primary" @click="login">跳原生登陆页面</md-button>
    <md-button type="primary" @click="logout">登出</md-button>
    <md-button type="primary" @click="setRightButton">设置右边按钮</md-button>
    <md-button type="primary" @click="setRightButtons">设置右边按钮组</md-button>
    <md-button type="primary" @click="setLeftButton">设置左边边按钮</md-button>
    <van-field v-model="bridgeUrl" label="路径" />
    <van-picker :columns="bridgeColumns" @change="pickerOnChange" :default-index="0" />
    <md-button type="primary" @click="bridge">路由跳转</md-button>
    <md-button type="primary" @click="setNavigationColor">设置导航栏颜色：黄底黑字</md-button>
    <md-button type="primary" @click="setNavigationColor1">设置导航栏颜色:红底白字</md-button>
    <div style="width:50px;height:50px;">{{num}}</div>
    <md-button type="primary" @click="call">打电话</md-button>
    <md-button type="primary" @click="msg">发短信</md-button>
    <md-button type="primary" @click="appstoreRating">应用评价</md-button>
    <md-button type="primary" @click="appupdate">应用更新</md-button>
    <md-button type="primary" @click="getLocation">获取当前位置</md-button>
    <md-button type="primary" @click="refreshLocation">更新当前位置</md-button>
    <div>city:{{dataInfo.city}}</div>
    <div>longitude:{{dataInfo.longitude}}</div>
    <md-button type="primary" @click="share">分享</md-button>
    <md-button type="primary" @click="toast">提示框</md-button>
    <md-button type="primary" @click="getDeviceModel">获取手机型号</md-button>
    <md-button type="primary" @click="wxPay">微信支付</md-button>
    <md-button type="primary" @click="aliPay">阿里支付</md-button>
    <van-field v-model="pageTitle" label="title" />
    <md-button type="primary" @click="setTitle">设置title</md-button>
    <div>ua：{{ua}}</div>
    <div style="font-size:14px;">
      {{systemInfo}}
    </div>
    <div style="font-size:14px;">
      {{tokenInfo}}
    </div>
    <div style="font-size:14px;">
      {{verifyIdentityInfo}}
    </div>
  </div>
</template>

<script>
  import {
    Button,
    Toast,
  } from 'mand-mobile'
  import {
    Field,
    Picker
  } from 'vant'
  import commonUtils from '@/utils/common'
  import app_v2 from '@/utils/app_v2'
  export default {
    data() {
      return {
        num: 0,
        ua: null,
        dataInfo: {
          city: null,
          longitude: null
        },
        bridgeUrl: '',
        bridgeColumns: ['h5', 'final_h5', 'full_h5', 'home', 'mid', 'mine', 'scan'],
        bridgeFlag: 'h5',
        pageTitle: ''
      }
    },
    components: {
      'md-button': Button,
      [Field.name]: Field,
      [Picker.name]: Picker
    },
    created() {
      Toast.info(navigator.userAgent.toLowerCase())
      this.ua = navigator.userAgent
    },
    methods: {
      getToken() {
        app_v2.getToken().then(res => {
          Toast.info(res)
        })
      },
      login() {
        app_v2.login()
      },
      logout() {
        app_v2.logout()
      },
      pickerOnChange(picker, value, index) {
        console.log(picker, value, index)
        this.bridgeFlag = value
      },
      bridge() {
        let _this = this
        app_v2.bridge(_this.bridgeFlag, {
          'url': _this.bridgeUrl
        })
      },
      setRightButtons() {
        let _this = this
        app_v2.setSetButtons({
          img: '',
          title: '按钮组',
          titleColor: '#ff0000',
          subBtns: [{
            img: '',
            title: '按钮加',
            trigger: () => {
              console.log('按钮1')
              app_v2.toast('app测试')
              _this.num += 1
            }
          }, {
            img: '',
            title: '按钮减',
            trigger: () => {
              console.log('按钮2')
              app_v2.toast('app测试')
              _this.num -= 1
            }
          }]
        })
      },

      setRightButton() {
        app_v2.setRightButton({
          img: '',
          title: '按钮',
          titleColor: '#ff0000',
          trigger: () => {
            console.log('按钮')
            app_v2.toast('app测试')
          }
        })
      },
      setLeftButton() {
        app_v2.setLeftButton({
          img: '',
          title: '按钮',
          titleColor: '#ff0000',
          intercept: '1',
          trigger: () => {
            console.log('按钮')
            app_v2.toast('app测试')
          }
        })
      },
      setNavigationColor() {
        app_v2.setNavigationColor('#fff900', '#000000')
      },
      setNavigationColor1() {
        app_v2.setNavigationColor('#fe6666', '#FFFFFF')
      },
      call() {
        app_v2.callSystem('tel', '17621504892')
      },
      msg() {
        app_v2.callSystem('sms', '17621504892')
      },
      appstoreRating() {
        app_v2.appstoreRating()
      },
      appupdate() {
        app_v2.appupdate()
      },
      getLocation() {
        let _this = this
        app_v2.getLocation().then(res => {
          Toast.info(res)
          console.log(res.longitude)
          _this.$set(_this.dataInfo, 'city', res.city)
          _this.$set(_this.dataInfo, 'longitude', res.longitude)
        })
      },
      refreshLocation() {
        let _this = this
        app_v2.refreshLocation().then(res => {
          Toast.info(res)
          console.log(res)
          _this.$set(_this.dataInfo, 'city', res.city)
          _this.$set(_this.dataInfo, 'longitude', res.longitude)
        })
      },
      share() {
        app_v2.share({
          title: 'app测试',
          content: '测试测试测试',
          url: 'http://www.baidu.com',
          img: '',
          shareType: '0',
          base64: ''
        })
      },
      toast() {
        app_v2.toast('app测试')
      },
      getDeviceModel() {
        app_v2.getDeviceModel().then((res) => {
          console.log(res)
        })
      },
      wxPay() {
        app_v2.wxPay({
          partnerid: 'wxpay1111',
          prepayid: 'wxpay1111',
          noncestr: 'qwertyuiop',
          timestamp: new Date().getTime(),
          sign: 'qazwsxedc'
        }).then(res => {
          Toast.info(res)
        })
      },
      aliPay() {
        app_v2.aliPay({
          orderStr: 'alipay123456'
        }).then(res => {
          Toast.info(res)
        })
      },
      setTitle() {
        let _this = this
        app_v2.webviewTitle({
          title: _this.pageTitle
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .md-button {
    margin: 0.1rem auto;
    width: 92%;
  }
</style>